<template>
  <div>
    <div v-show="show">
      自提点名称：<el-input
        class="inp"
        v-model="input"
        placeholder="请输入自提点名称"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="sou"
        >搜索</el-button
      >
      <el-button><i class="el-icon-delete" @click="qk"></i>清空</el-button>
    </div>

    <div class="btn">
      <div :data="btn">
        <el-button type="primary" icon="el-icon-plus" @click="xinzeng"
          >新增</el-button
        >
        <el-button type="danger" @click="plsc">批量删除</el-button>
        <!-- <el-button type="danger" v-else>批量删除</el-button> -->
      </div>

      <div>
        <el-button class="yuan" icon="el-icon-refresh" circle></el-button>
        <el-button
          class="yuan"
          icon="el-icon-search"
          circle
          @click="fdj"
        ></el-button>
      </div>
    </div>

    <div>
      <el-button type="primary" plain
        >当前表格已选择{{ btn.length }}项 <span>清空</span></el-button
      >
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      border
    >
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column label="自提点名称" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.addrName }}</template>
      </el-table-column>
      <el-table-column label="手机号" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.mobile }}</template>
      </el-table-column>
      <el-table-column label="省份" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.province }}</template>
      </el-table-column>
      <el-table-column label="城市" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.city }}</template>
      </el-table-column>
      <el-table-column label="区/县" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.area }}</template>
      </el-table-column>
      <el-table-column label="地址" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.addr }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
            icon="el-icon-edit"
            type="primary"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 模态框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="addrName">
          <el-input
            v-model="ruleForm.addrName"
            placeholder="请输入自提点名称"
          ></el-input>
        </el-form-item>

        <el-form-item class="ddd" label="省份" prop="addrName">
          <el-select
            v-model="nbnb"
            placeholder="请选择"
            @change="handleVisibleChange"
          >
            <el-option
              v-for="item in liyang[0]"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>

          <el-select
            v-model="nbnb2"
            placeholder="请选择"
            @change="handleVisibleChanges"
          >
            <el-option
              v-for="(item, index) in liyang2[0]"
              :key="index"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>

          <el-select v-model="nbnb3" placeholder="请选择">
            <el-option
              v-for="(item, index) in liyang3[0]"
              :key="index"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地址" prop="addr">
          <el-input v-model="ruleForm.addr" placeholder="请输入地址"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="ruleForm.mobile"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
      </el-form>

      <div class="an">
        <el-button class="btn1" @click="quxiao">取消</el-button>
        <el-button class="btn1" type="primary" @click="queding">确定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisibles"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForms"
        :rules="rules"
        ref="ruleForms"
        label-width="100px"
        class="demo-ruleForms"
      >
        <el-form-item label="名称" prop="addrName">
          <el-input
            v-model="ruleForms.addrName"
            placeholder="请输入自提点名称"
          ></el-input>
        </el-form-item>

        <el-form-item class="ddd" label="省份" prop="addrName">
          <el-select
            v-model="nbnb"
            placeholder="请选择"
            @change="handleVisibleChange"
          >
            <el-option
              v-for="item in liyang[0]"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>

          <el-select
            v-model="nbnb2"
            placeholder="请选择"
            @change="handleVisibleChanges"
          >
            <el-option
              v-for="(item, index) in liyang2[0]"
              :key="index"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>

          <el-select v-model="nbnb3" placeholder="请选择">
            <el-option
              v-for="(item, index) in liyang3[0]"
              :key="index"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地址" prop="addr">
          <el-input
            v-model="ruleForms.addr"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="ruleForms.mobile"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
      </el-form>

      <div class="an">
        <el-button class="btn1" @click="quxiao">取消</el-button>
        <el-button class="btn1" type="primary" @click="queding2"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 省名
      one: [],
      // 市名
      two: [],
      // 区
      three: [],
      // 时间戳
      timestamp: Math.floor(Date.now() / 1000),
      // 存放城市名称
      liyang: [],
      nbnb: "",
      // 市
      liyang2: [],
      nbnb2: "",
      // 区
      liyang3: [],
      nbnb3: "",
      input: "",
      tableData: [],
      total: 0,
      params: {
        current: 1,
        size: 10,
        t: this.timestamp,
      },
      btn: [],
      show: true,
      dialogVisible: false,
      dialogVisibles: false,
      ruleForm: {
        addrName: "",
      },
      ruleForms: {
        addrName: "",
      },
      rules: {
        addrName: [
          { required: true, message: "请输入自提点名称", trigger: "blur" },
        ],
        addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号格式不正确", trigger: "blur" },
        ],
      },
      df: "",
      df2: "",
      df3: "",
      btn2: [],
    };
  },
  created() {
    this.getList();
    this.ccc();
  },
  methods: {
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 城市id
    ccc() {
      console.log(this.timestamp);
      this.$http
        .get("http://admin.yami.byesame.com/apis/admin/area/listByPid", {
          params: {
            t: this.timestamp,
            pid: 0,
          },
        })
        .then((res) => {
          this.liyang.push(res.data);
          console.log(this.liyang[0]);
          this.one = res.data;
        });
    },
    // 市
    wxk() {
      // this.$http
      //   .get("http://admin.yami.byesame.com/apis/admin/area/listByPid", {
      //     params: {
      //       t: this.timestamp,
      //       pid: this.nbnb,
      //     },
      //   })
      //   .then((res) => {
      //     this.liyang2.push(res.data);
      //     console.log("厉害", this.liyang2[0]);
      //   });
    },
    // 表单选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
      this.btn = val;
      console.log(this.btn);
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.dialogVisibles = true;
      this.ruleForms = row;
      this.nbnb = row.province;
      this.nbnb2 = row.city;
      this.nbnb3 = row.area;
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("确定进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          console.log(index, row.addrId);
          let a = [];
          a.push(row.addrId);
          this.$http
            .delete("http://admin.yami.byesame.com/apis/shop/pickAddr", {
              data: a,
            })
            .then((res) => {
              console.log(res);
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页
    handleSizeChange(a) {
      console.log(`每页 ${a} 条`);
      this.params.size = a;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.current = val;
      this.getList();
    },
    getList() {
      this.$http
        .get("http://admin.yami.byesame.com/apis/shop/pickAddr/page", {
          params: this.params,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    // 顶部搜索
    sou() {
      this.$http
        .get("http://admin.yami.byesame.com/apis/shop/pickAddr/page", {
          params: {
            t: this.params.t,
            current: this.params.current,
            size: this.params.size,
            addrName: this.input,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    // 清空
    qk() {
      (this.input = ""), this.getList();
    },
    // 放大镜
    fdj() {
      if (this.show == true) {
        this.show = false;
      } else if (this.show == false) {
        this.show = true;
      }
    },
    // 新增
    xinzeng() {
      this.dialogVisible = true;
    },
    // 模态框叉号
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.nbnb = "";
          this.nbnb2 = "";
          this.nbnb3 = "";
          a;
        })
        .catch((_) => {});
    },
    // 模态框取消
    quxiao() {
      this.dialogVisible = false;
      this.dialogVisibles = false;
      this.nbnb = "";
      this.nbnb2 = "";
      this.nbnb3 = "";
    },
    // 模态框确定
    queding() {
      console.log(this.nbnb);
      console.log(this.one);
      console.log(this.two);
      console.log(this.three);
      for (let i = 0; i < this.one.length; i++) {
        if (this.one[i].areaId == this.nbnb) {
          this.df = this.one[i].areaName;
        }
      }
      for (let i = 0; i < this.two.length; i++) {
        if (this.two[i].areaId == this.nbnb2) {
          this.df2 = this.two[i].areaName;
        }
      }
      for (let i = 0; i < this.three.length; i++) {
        if (this.three[i].areaId == this.nbnb3) {
          this.df3 = this.three[i].areaName;
        }
      }
      console.log(this.df);
      console.log(this.df2);
      console.log(this.df3);

      this.$http
        .post("http://admin.yami.byesame.com/apis/shop/pickAddr", {
          addr: this.ruleForm.addr,
          addrName: this.ruleForm.addrName,
          area: this.df3,
          areaId: this.nbnb3,
          city: this.df2,
          cityId: this.nbnb2,
          mobile: this.ruleForm.mobile,
          province: this.df,
          provinceId: this.nbnb,
          t: this.timestamp,
        })
        .then((res) => {
          console.log(res);
          this.getList();
          this.dialogVisible = false;
        });
    },
    // 编辑模态框确定
    queding2() {
      console.log(this.nbnb);
      console.log(this.one);
      console.log(this.two);
      console.log(this.three);
      for (let i = 0; i < this.one.length; i++) {
        if (this.one[i].areaId == this.nbnb) {
          this.df = this.one[i].areaName;
        }
      }
      for (let i = 0; i < this.two.length; i++) {
        if (this.two[i].areaId == this.nbnb2) {
          this.df2 = this.two[i].areaName;
        }
      }
      for (let i = 0; i < this.three.length; i++) {
        if (this.three[i].areaId == this.nbnb3) {
          this.df3 = this.three[i].areaName;
        }
      }
      console.log(this.df);
      console.log(this.df2);
      console.log(this.df3);

      this.$http
        .put("http://admin.yami.byesame.com/apis/shop/pickAddr", {
          addr: this.ruleForms.addr,
          addrId: this.ruleForms.addrId,
          addrName: this.ruleForms.addrName,
          area: this.df3,
          areaId: this.nbnb3,
          city: this.df2,
          cityId: this.nbnb2,
          mobile: this.ruleForms.mobile,
          province: this.df,
          provinceId: this.nbnb,
          t: this.timestamp,
        })
        .then((res) => {
          console.log(res);
          this.getList();
          this.dialogVisibles = false;
          this.nbnb = "";
          this.nbnb2 = "";
          this.nbnb3 = "";
        });
    },
    handleVisibleChange(val) {
      (this.nbnb2 = ""),
        (this.nbnb3 = ""),
        // console.log(this.timestamp);
        console.log(val, this.nbnb);
      // this.wxk();
      this.$http
        .get("http://admin.yami.byesame.com/apis/admin/area/listByPid", {
          params: {
            t: this.timestamp,
            pid: this.nbnb,
          },
        })
        .then((res) => {
          this.liyang2.push(res.data);
          console.log("厉害", this.liyang2[0]);
          this.two = res.data;
        });
    },
    handleVisibleChanges(val) {
      console.log(val, this.nbnb2);
      this.$http
        .get("http://admin.yami.byesame.com/apis/admin/area/listByPid", {
          params: {
            t: this.timestamp,
            pid: this.nbnb2,
          },
        })
        .then((res) => {
          this.liyang3.push(res.data);
          console.log("牛逼", this.liyang3[0]);
          this.three = res.data;
        });
    },
    // 批量删除
    plsc() {
      this.$confirm("确认进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          for (let i = 0; i < this.btn.length; i++) {
            let b = [];
            b.push(this.btn[i].addrId);
            this.$http
              .delete("http://admin.yami.byesame.com/apis/shop/pickAddr", {
                data: b,
              })
              .then((res) => {
                console.log(res);
                this.getList();
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.inp {
  width: 240px;
  height: 28px;
  line-height: 28px;
  margin-right: 100px;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.el-table {
  margin-top: 20px;
}
.el-select {
  margin-right: 3px;
}
.an {
  width: 100%;
  text-align: right;
}
</style>